<template>
  <div class="settings-page">
    <el-page-header title="返回" @back="$router.go(-1)">
      <template #content>
        <div class="page-header-content">
          <h2>系统设置</h2>
          <p class="header-subtitle">配置系统参数和选项</p>
        </div>
      </template>
    </el-page-header>

    <div class="settings-content">
      <el-card class="settings-card">
        <template #header>
          <div class="card-header">
            <el-icon><Setting /></el-icon>
            <span>系统参数配置</span>
          </div>
        </template>

        <el-form :model="settingsForm" label-width="120px" class="settings-form">
          <el-form-item label="系统名称">
            <el-input v-model="settingsForm.systemName" placeholder="请输入系统名称" />
          </el-form-item>
          
          <el-form-item label="自动保存">
            <el-switch 
              v-model="settingsForm.autoSave" 
              active-text="开启" 
              inactive-text="关闭"
            />
          </el-form-item>
          
          <el-form-item label="保存间隔(分钟)" v-if="settingsForm.autoSave">
            <el-slider 
              v-model="settingsForm.saveInterval" 
              :min="1" 
              :max="60" 
              show-input
              :show-input-controls="false"
            />
          </el-form-item>
          
          <el-form-item label="主题模式">
            <el-select v-model="settingsForm.theme" placeholder="请选择主题">
              <el-option label="浅色模式" value="light" />
              <el-option label="深色模式" value="dark" />
              <el-option label="自动" value="auto" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="通知设置">
            <el-checkbox-group v-model="settingsForm.notifications">
              <el-checkbox label="email" :value="1">邮件通知</el-checkbox>
              <el-checkbox label="system" :value="2">系统通知</el-checkbox>
              <el-checkbox label="sms" :value="3">短信通知</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          
          <el-form-item>
            <div class="form-actions">
              <el-button type="primary" @click="saveSettings">保存设置</el-button>
              <el-button @click="resetSettings">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
      
      <el-card class="settings-card">
        <template #header>
          <div class="card-header">
            <el-icon><InfoFilled /></el-icon>
            <span>系统信息</span>
          </div>
        </template>
        
        <div class="system-info">
          <div class="info-item">
            <span class="info-label">版本号:</span>
            <span class="info-value">v1.2.0</span>
          </div>
          <div class="info-item">
            <span class="info-label">最后更新:</span>
            <span class="info-value">2023-10-15</span>
          </div>
          <div class="info-item">
            <span class="info-label">技术支持:</span>
            <span class="info-value">support@exam-system.com</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Setting, InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const settingsForm = ref({
  systemName: '题库管理系统',
  autoSave: true,
  saveInterval: 5,
  theme: 'light',
  notifications: ['email', 'system']
})

const saveSettings = () => {
  ElMessage.success('设置保存成功')
}

const resetSettings = () => {
  settingsForm.value = {
    systemName: '题库管理系统',
    autoSave: true,
    saveInterval: 5,
    theme: 'light',
    notifications: ['email', 'system']
  }
  ElMessage.info('设置已重置')
}
</script>

<style scoped>
.settings-page {
  padding: 15px;
  height: calc(100vh - 54px);
  display: flex;
  flex-direction: column;
}

.page-header-content h2 {
  margin-bottom: 5px;
  font-size: 1.8rem;
}

.header-subtitle {
  color: #666;
  font-size: 1rem;
}

.settings-content {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.settings-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
}

.settings-card :deep(.el-card__header) {
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
  padding: 15px 20px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  font-weight: 500;
  color: #333;
}

.settings-form {
  padding: 5px 0;
}

:deep(.el-form-item) {
  margin-bottom: 20px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #555;
}

.form-actions {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.system-info {
  padding: 10px 0;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-weight: 500;
  color: #555;
}

.info-value {
  color: #666;
}

@media (max-width: 768px) {
  .settings-page {
    padding: 10px;
  }
  
  .page-header-content h2 {
    font-size: 1.5rem;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .info-item {
    flex-direction: column;
    gap: 5px;
  }
  
  :deep(.el-form-item) {
    margin-bottom: 15px;
  }
}
</style>